import React, { Component } from 'react';
import { Route, Link } from 'react-router-dom';
import Info from './Info';

class Topics extends Component {
    render() {
        const {match} = this.props;
        return (
            <div>
                <h2>Topics</h2>

                <ul>
                    <li>
                        <Link to={`${match.url}/components`}>Components</Link>
                    </li>
                    <li>
                        <Link to={`${match.url}/props-v-state`}>Props V. State</Link>
                    </li>
                </ul>


                <Route path={`${match.path}/:id`} component={Info} />
                <Route exact path={`${match.path}`}
                    render={() => <h3>Please Select a Topic.</h3>} />
            </div>
        );
    }
}

export default Topics;